let sessionId = null;

async function obtenerUserId() {
    const browserId = localStorage.getItem('browserId');
    //console.log('[Frontend] browserId:', browserId);
    
    if (!browserId) {
        //console.log('[Frontend] No hay browserId, usando default');
        return { user_id: null, user_name: 'Chelero-web-User' };
    }
    
    try {
        const response = await fetch('/api/chatbot/obtener-usuario', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ browserId })
        });
        
        if (!response.ok) {
            console.log('[Frontend] Error en response');
            return { user_id: null, user_name: 'Chelero-web-User' };
        }
        
        const data = await response.json();
        //console.log('[Frontend] Datos recibidos del endpoint:', data);
        return data;
        
    } catch (error) {
        console.error('[Frontend] Error obteniendo usuario:', error);
        return { user_id: null, user_name: 'Chelero-web-User' };
    }
}

document.addEventListener('DOMContentLoaded', function() {
    const chatbotToggle = document.getElementById('chatbot-toggle');
    const chatbotClose = document.getElementById('chatbot-close');
    const chatbotContainer = document.getElementById('chatbot-container');
    const chatbotSend = document.getElementById('chatbot-send');
    const chatbotInput = document.getElementById('chatbot-input');
    const chatbotSpeech = document.getElementById('chatbot-speech');
    const chatbotMessages = document.getElementById('chatbot-messages');

    setTimeout(() => {
        chatbotSpeech.classList.remove('hidden');
        setTimeout(() => {
            chatbotSpeech.classList.add('hidden');
        }, 5000);
    }, 3000);

    chatbotToggle.addEventListener('click', function() {
    chatbotContainer.classList.remove('chatbot-hidden');
    chatbotSpeech.classList.add('hidden');
    chatbotToggle.style.display = 'none';
    chatbotInput.focus();

    if (chatbotMessages.children.length === 0) {
        cargarMensajes(); // Agregar esta línea
        if (chatbotMessages.children.length === 0) {
            setTimeout(() => {
                agregarMensaje('bot', '¡Hola! 👋🍺 Soy Chelabot, tu asistente de Club Chelero. ¿En qué puedo ayudarte?');
            }, 500);
        }
    }
});

    chatbotClose.addEventListener('click', function() {
        chatbotContainer.classList.add('chatbot-hidden');
        chatbotToggle.style.display = 'block';
        chatbotMessages.innerHTML = '';
    });

    chatbotSend.addEventListener('click', enviarMensaje);

    chatbotInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            enviarMensaje();
        }
    });
});

async function enviarMensaje() {
    const input = document.getElementById('chatbot-input');
    const mensaje = input.value.trim();
    
    if (!mensaje) return;
    
    agregarMensaje('user', mensaje);
    input.value = '';
    agregarIndicadorEscribiendo();
    
    try {
        const userData = await obtenerUserId();
           
        const response = await fetch('/api/chatbot/preguntar', { 
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                pregunta: mensaje,
                session_id: sessionId,
                user_id: userData.user_id,
                user_name: userData.user_name,
                tel_usuario: userData.tel_usuario,
                source_platform: 'club_chelero_web',
                modelo_id: '68daa8536b668e23d40b5f99'
            })
        });
        
        if (!response.ok) {
            throw new Error('Error en la respuesta del servidor');
        }
        
        const data = await response.json();
        
        if (data.session_id) {
            sessionId = data.session_id;
        }
        
        quitarIndicadorEscribiendo();
        agregarMensaje('bot', data.respuesta);
        
        if (data.temas_relacionados && data.temas_relacionados.length > 0) {
            agregarTemasRelacionados(data.temas_relacionados);
        }
        
    } catch (error) {
        console.error('Error:', error);
        quitarIndicadorEscribiendo();
        agregarMensaje('bot', 'Lo siento, ocurrió un error. Por favor intenta de nuevo más tarde. 😕');
    }
}

function agregarMensaje(tipo, contenido) {
    const messagesDiv = document.getElementById('chatbot-messages');
    const messageDiv = document.createElement('div');
    messageDiv.className = `chatbot-message ${tipo === 'user' ? 'chatbot-message-user' : 'chatbot-message-bot'}`;
    
    const htmlContenido = contenido
        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
        .replace(/\n/g, '<br>');
    
    messageDiv.innerHTML = `<div class="chatbot-message-content">${htmlContenido}</div>`;
    messagesDiv.appendChild(messageDiv);
    messagesDiv.scrollTop = messagesDiv.scrollHeight;
        guardarMensajes();

}

function agregarIndicadorEscribiendo() {
    const messagesDiv = document.getElementById('chatbot-messages');
    const indicador = document.createElement('div');
    indicador.className = 'chatbot-message chatbot-message-bot';
    indicador.id = 'typing-indicator';
    indicador.innerHTML = `
        <div class="chatbot-message-content">
            <div class="typing-indicator">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    `;
    messagesDiv.appendChild(indicador);
    messagesDiv.scrollTop = messagesDiv.scrollHeight;
}

function quitarIndicadorEscribiendo() {
    const indicador = document.getElementById('typing-indicator');
    if (indicador) {
        indicador.remove();
    }
}

function agregarTemasRelacionados(temas) {
    const messagesDiv = document.getElementById('chatbot-messages');
    const temasDiv = document.createElement('div');
    temasDiv.className = 'chatbot-message chatbot-message-bot';
    
    let html = '<div class="chatbot-message-content"><div style="margin-top: 10px;">';
    html += '<strong>📚 Temas relacionados:</strong><br><br>';
    
    temas.forEach(tema => {
        html += `<a href="${tema.url}" target="_blank" style="display: block; color: #EEBA0B; margin-bottom: 8px; text-decoration: none;">
            • ${tema.titulo}
        </a>`;
    });
    
    html += '</div></div>';
    temasDiv.innerHTML = html;
    
    messagesDiv.appendChild(temasDiv);
    messagesDiv.scrollTop = messagesDiv.scrollHeight;
}

function guardarMensajes() {
    const mensajes = [];
    document.querySelectorAll('.chatbot-message').forEach(msg => {
        mensajes.push({
            tipo: msg.classList.contains('chatbot-message-user') ? 'user' : 'bot',
            contenido: msg.querySelector('.chatbot-message-content').innerHTML
        });
    });
    sessionStorage.setItem('chatbot_mensajes', JSON.stringify({
        mensajes: mensajes,
        timestamp: Date.now()
    }));
}

function cargarMensajes() {
    const datos = sessionStorage.getItem('chatbot_mensajes');
    if (datos) {
        const { mensajes, timestamp } = JSON.parse(datos);
        const tiempoExpiracion = 30 * 60 * 1000; // 30 minutos
        
        if (Date.now() - timestamp > tiempoExpiracion) {
            sessionStorage.removeItem('chatbot_mensajes');
            return;
        }
        
        mensajes.forEach(msg => {
            agregarMensaje(msg.tipo, msg.contenido);
        });
    }
}